<template>

  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    :default-active="route.path"

    text-color="#fff"
  
  >
  <h3>后台管理页面</h3>
  <el-menu-item
  v-for="item in noChildren"
  :index="item.path"
  :key="item.path"
  @click="goToHanlder(item.path)"
  >
  <component class="icons" :is="item.icon"></component>
  <span>{{ item.label }}</span>
  </el-menu-item>
    

    <el-sub-menu
    v-for="item in hasChildren"
    :index="item.path"
    :key="item.path"
    >
      <template #title>
        <component class="icons" :is="item.icon"></component>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item-group >
        <el-menu-item 
        v-for="subItem in item.children"
        :index="subItem.path"
        :key="subItem.path"
        @click="() => router.push(subItem.path)"
        >
        <component class="icons" :is="subItem.icon"></component>
        <span>{{ subItem.label }}</span>
        </el-menu-item>
        
      </el-menu-item-group>

    </el-sub-menu>

  </el-menu>

</template>


<script setup>
import {useRouter} from 'vue-router'
import {ref ,computed} from 'vue'
import {useRoute} from 'vue-router'

const router = useRouter()

const route = useRoute()


const menus = ref([
{
    path: '/index', 
    label: '首页' ,
    name: 'home' ,
    icon:'house' ,
},
{
    path: '/book', 
    name: 'book' ,
    label: '图书管理' ,
    icon:'notebook' ,
},
{
    path: '/user', 
    name: 'user' ,
    label: '用户管理' ,
    icon:'user' ,
},
{
    path: '/test', 
    name: 'test' ,
    label: '测试' ,
    icon:'test' ,
},



{
    path: '/other',
    label: '其它页面',
    icon:'location',
    children:[
        {

            path: '/other/page1',
            name:'page1' ,
            label:'页面一' ,
            icon:'setting',
            url:'PageOne'
        },
        {
            path: '/other/page2',
            name:'page2' ,
            label:'页面二' ,
            icon:'setting',
            url:'PageTwo'
        }
    
    ]

}

])


const goToHanlder = (path) => {
return router.push(path)
}


//计算属性 

// 将某个数据 进行计算操作后 返回一个新的数据
// 里面写 你要操作的数据 返回的结果
// 

const noChildren = computed(() => menus.value.filter(item => !item.children) )

const hasChildren = computed(() => menus.value.filter(item => item.children) )





</script>

<style scoped>
.icons{
width: 18px;
height: 18px;

margin-right: 5px;
}

.el-menu{
border-right: none;
height: 800px;
width: 180px;


}  

h3{
text-align: center;
color: white;

}
</style>